import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { NzMessageService } from 'ng-zorro-antd'
import { STColumn } from '@delon/abc'
import { ACLService } from '@delon/acl'

import { I18NService } from '@core'
import { ListBaseClass } from '@shared/classes/ListBaseClass'
import { Merchant, IMerchantQueryParams } from '@shared/interfaces/merchant'
import { MerchantService } from 'app/routes/merchant/merchant.service'
import { MerchantAlinterService } from 'app/routes/merchant/merchant-alinter.service'
import { PageService } from '@shared/services/page.service'
import { ETabScrollStatus } from '@shared/enums'
import { ModalService } from '@shared/services/modal.service'

@Component({
  selector: 'app-group-detail-tab-merchants',
  templateUrl: './tab-merchants.component.html',
  styleUrls: ['../../../../shared/styles/table.less'],
  providers: [
    { provide: MerchantService, useClass: MerchantAlinterService },
  ]
})
export class GroupDetailTabMerchantsComponent extends ListBaseClass<Merchant, IMerchantQueryParams> implements OnInit {
  size = 5
  params: any

  columns: STColumn[] = []

  constructor(
    public msg: NzMessageService,
    public i18n: I18NService,
    public route: ActivatedRoute,
    public router: Router,
    private merchantService: MerchantService,
    private pageService: PageService,
    private aclService: ACLService,
    private modalService: ModalService,
  ) {
    super(msg, i18n, route, router)
  }

  ngOnInit(): void {
    this.initColumns()
    const agentCode = this.route.parent.snapshot.params['id']
    this.params = { agentCode, size: this.size }
    this.queryTableDataWithParams()
  }

  queryTableDataWithParams(): void {
    this.loading = true

    this.merchantService
      .getList(this.params)
      .subscribe(this.renderList.bind(this))
  }

  renderList(res): void {
    this.data = res.data
    this.total = res.total
    this.loading = false
    this.pageService.setTabScrollStatus(ETabScrollStatus.Scroll)
  }

  goAddMerchant() {
    this.router.navigate(['biz/merchants/new'])
  }

  viewDetail(data) {
    const { common } = data
    this.router.navigate(['biz/merchants', common.intMerCode])
  }

  freezeDialog(record: Merchant): void {
    const { merName } = record.common
    const msg = this.trans('GENERAL.NOTIFICATION.MERCHANT_FREEZE_CONFIRM', { merName })
    this.modalService.freezeAndUnFreeze(msg).subscribe(isOK => {
      if (!isOK) return
      this.freeze(record)
    })
  }

  unfreezeDialog(record: Merchant): void {
    const { merName } = record.common
    const msg = this.trans('GENERAL.NOTIFICATION.MERCHANT_UNFREEZE_CONFIRM', { merName })
    this.modalService.freezeAndUnFreeze(msg).subscribe(isOK => {
      if (!isOK) return
      this.unfreeze(record)
    })
  }

  freeze(record: Merchant): void {
    const { intMerCode } = record.common
    this.merchantService.freeze(intMerCode).subscribe(
      success => {
        this.msg.success(this.trans('GENERAL.NOTIFICATION.FREEZE_SUCCESS'))
        this.st.reload()
      },
      err => {
        this.msg.error(this.trans('GENERAL.NOTIFICATION.FREEZE_FAIL'))
      },
    )
  }

  unfreeze(record: Merchant): void {
    const { intMerCode } = record.common
    this.merchantService.unfreeze(intMerCode).subscribe(
      success => {
        this.msg.success(this.trans('GENERAL.NOTIFICATION.UNFREEZE_SUCCESS'))
        this.st.reload()
      },
      err => {
        this.msg.error(this.trans('GENERAL.NOTIFICATION.UNFREEZE_FAIL'))
      },
    )
  }

  private initColumns() {
    const canLock = this.aclService.canAbility('api.put.camel.merchant.one.freeze')
    const canUnlock = this.aclService.canAbility('api.put.camel.merchant.one.unfreeze')
    this.columns = [
      {
        type: 'link',
        title: '商户编号',
        i18n: 'GENERAL.MERCHANT.NUM',
        index: 'common.merNum',
        width: 160,
        className: 'text-center',
        fixed: 'left',
        click: this.viewDetail.bind(this)
      },
      {
        title: '商户名称',
        i18n: 'GENERAL.MERCHANT.NAME',
        width: 200,
        index: 'common.merName',
        className: 'text-left',
      },
      {
        title: '商户英文名称',
        i18n: 'GENERAL.MERCHANT.NAME_EN',
        width: 200,
        index: 'common.merNameEN',
        className: 'text-left',
      },
      {
        title: '创建时间',
        i18n: 'GENERAL.INFO.CREATED_AT',
        index: 'createdAt',
        type: 'date',
        dateFormat: 'YYYY-MM-DD HH:mm',
        width: 200,
        className: 'text-center',
      },
      {
        title: 'Operation',
        i18n: 'GENERAL.INFO.OPERATION',
        width: 180,
        fixed: 'right',
        className: 'text-center',
        iif: () => canLock,
        buttons: [
          {
            text: '',
            icon: {
              iconfont: 'icon-lock-twotone',
              type: 'iconfont',
            },
            click: this.freezeDialog.bind(this),
            iif: record => canLock && record.common.status === 'normal',
          },
          {
            text: '',
            icon: {
              iconfont: 'icon-unlock-circle',
              type: 'iconfont',
            },
            click: this.unfreezeDialog.bind(this),
            iif: record => canUnlock && record.common.status === 'freeze',
          },
        ]
      }
    ]
  }
}
